<template>
	<div class="bannerTop">
   <div >
      <div id="BMap" :class="searchBarFixed == true ? 'isFixed' :'BMap'">
        <div class="m-filter">
          <div class="m-filter_left">
            <i class="icon iconfont icon-icon-test"></i>
            <span>{{positionText}}</span>
          </div>
        </div>
        <div class="center" @click="getRanking()">
          <van-search
            placeholder="搜索"
            v-model="searchValue"
            shape="round"
            @search="searchMethod"
            @clear="clearSearch"
          />
        </div>
        <div @click="wxScanCode()" class="shuo">
          <img src="https://image.soole.com.cn/sl4.png" />
        </div>
      </div>
    </div>

    <positionMap ref="pMap"></positionMap>
    <div class="banner"></div>
	</div>
</template>

<script>
import positionMap from '@/components/positionMap.vue'
import wx from "weixin-jsapi";
export default {
	components:{
    positionMap
   },
    data () {
        return {
          imgurl:null,
          lunData: [],
          searchBarFixed:false,
          //定位省市区
          positionText: "",
          swipeNum: 6,
          lineHeight: 0,
          active: 0,
          positionAddress:{},
          navList:[],
          searchValue: "",
        }
    },
  mounted() {
    window.addEventListener('scroll',this.handleScroll)
  },
  watch: {
    //获取定位地址
    positionAddress() {
      if (this.positionAddress&&this.positionAddress.addressComponent) {
        this.positionText =
          // this.positionAddress.addressComponent.province
          this.positionAddress.addressComponent.district;
      }
    }
  },
	methods: {
    //搜索
    searchMethod() {
      this.getInitData();
    },
    //清除搜索
    clearSearch() {
      this.getInitData();
    },
    getRanking() {
      this.$router.push('/About')
    },
    toLinkFen(){

    },
    handleScroll() { //改变元素#searchBar的top值
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
	  console.log(scrollTop);
	  console.log('=============');
      if(scrollTop > 0){
        this.searchBarFixed = true;
      }else{
        this.searchBarFixed = false;
      }
    },
    //微信扫一扫
    wxScanCode() {
      $.ajax({
        type: "POST",
        url: "后端提供的接口",
        data: {
          url: window.location.href.split("#")[0] // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
        },
        dataType: "json",
        success: function(result) {
          console.log("result", result);
          // 后端返回的参数
          var timestamp = result.timestamp;
          var noncestr = result.nonceStr;
          var signature = result.signature;
          var appId = result.appId;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1
            jsApiList: [
              "checkJsApi",
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "onMenuShareQQ",
              "onMenuShareWeibo",
              "hideMenuItems",
              "showMenuItems",
              "hideAllNonBaseMenuItem",
              "showAllNonBaseMenuItem",
              "translateVoice",
              "startRecord",
              "stopRecord",
              "onRecordEnd",
              "playVoice",
              "pauseVoice",
              "stopVoice",
              "uploadVoice",
              "downloadVoice",
              "chooseImage",
              "previewImage",
              "uploadImage",
              "downloadImage",
              "getNetworkType",
              "openLocation",
              "getLocation",
              "hideOptionMenu",
              "showOptionMenu",
              "closeWindow",
              "scanQRCode",
              "chooseWXPay",
              "openProductSpecificView",
              "addCard",
              "chooseCard",
              "openCard"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.ready(function() {
            wx.scanQRCode({
              needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: function(res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
                // alert(result);
                // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
                // sessionStorage.setItem('saomiao_result',result);
                //其它网页调用二维码扫描结果：
                // var result = sessionStorage.getItem("saomiao_result");
                console.log(result);
              },
              error: function(res) {
                console.log(res);
              }
            });
          });
        }
      });
    }
  },
  destroyed() {//离开该页面需要移除这个监听的事件
    window.removeEventListener('scroll',this.handleScroll)
  },
    }
</script>
<style scoped>
  @import '../../assets/css/index.css';
	.banner{
		width: 100%;
    z-index:0;position: fixed;top: 0;
    background-image: url("https://image.soole.com.cn/sl1.png");background-size: 100% 100%;
    height: 1.3rem;
	}
	.banner img{
		width: 100%;
		height: 100%;
	}
	.banner .van-swipe__indicators{
		bottom: 0.4rem;
	}
  .m-filter_left{
    padding-left: 0.1rem;
    color: #fff;
  }
  .m-filter_left i{
    color: #fff;
  }
  .center {
    width: 50%;
    float: left;
    height: 0.3rem;
    margin-top: 0.1rem;
  }
  .van-search {
    background: none !important;
  }
  /deep/.van-search .van-cell{
    border-radius: 1rem;
  }
</style>
